<template>
	<view>
		<custom-nav-sq-xcx :isBack="true" currBg="usuallyBg" :needConBlock="true">
			<block slot="content">意见反馈</block>
		</custom-nav-sq-xcx>
		<sq-screen-area :formFlag="true" :needBtnFlag="true">
			<block slot="formContent">
				<view class="sqFormWrap">
					<view class="formItem">
						<view class="formTit"><text class="mustTag">*</text>反馈标签</view>
						<picker class="formCon sqPickerView"  @change="bindFeedBackTag" :value="feedIndex" :range="feedTag" range-key="name">
							<view class="street" :class="[isSelTagFlag ? 'hasSel' : '']">{{feedTagTxt}}</view>
							<view class="triView">选择</view>
						</picker>
					</view>
					<view class="formItem">
						<view class="formTit"><text class="mustTag">*</text>反馈主题</view>
						<view class="formCon">
							<input class="formInp" type="text" v-model="feedTit" placeholder="请输入反馈主题(40字内)" maxlength="40" placeholder-style="color:#8789B1"/>
						</view>
					</view>
					<view class="formItem">
						<view class="formTit"><text class="mustTag">*</text>反馈意见</view>
						<view class="formCon spec">
							<textarea v-model="feedCon" class="formTxtarea" placeholder="请输入反馈意见(200字内)" maxlength="200"
								placeholder-style="color:#8789B1"></textarea>
						</view>
					</view>
					<view class="formItem">
						<view class="formTit">上传图片<text>(选填)</text></view>
						<view class="uni-uploader-body" style="margin-top: -10rpx;">
							<view class="uni-uploader__files">
								<block v-for="(image,index) in albumList" :key="index">
									<view class="uni-uploader__file">
										<view class="iconfont icon-guanbi" @tap="delect(index)"></view>
										<image class="uni-uploader__img" :src="image" :data-src="image"
											@tap="previewImage" mode="aspectFill"></image>
									</view>
								</block>
								<view class="uni-uploader__input-box" v-show="hasFullFlag">
									<view class="uni-uploader__input" @tap="chooseImage"></view>
								</view>
							</view>
						</view>
						<view class="uni-uploader-head">
							<view class="uni-uploader-title">注:最多上传6张图片<text>({{albumList.length}}/6)</text></view>
						</view>
					</view>
					<view class="lxrForm hasFlex">
						<view class="lxrItem">
							<view class="lxrTit">联系人</view>
							<view class="lxrInp">
								<input class="inpView" v-model="lxrName" type="text" placeholder="请输入联系人姓名" placeholder-style="color:A6A6A6;"/>
							</view>
						</view>
						<view class="lxrItem">
							<view class="lxrTit">联系电话</view>
							<view class="lxrInp">
								<input class="inpView" v-model="lxrTel" type="tel" placeholder="请输入联系方式" placeholder-style="color:A6A6A6;"/>
							</view>
						</view>
					</view>
				</view>
			</block>
			<block slot="formBtn">
				<button class="comBtn sq hasBorRad" :disabled="btnDisabFlag" @tap="goSubmit">{{btnTit}}</button>
			</block>
		</sq-screen-area>
	</view>
</template>

<script>
	import SqScreenArea from "@/components/sq-screen-area";
	import upMultiImg from '@/mixins/upMultiImg.js'
	export default {
		components:{
			SqScreenArea
		},
		mixins:[upMultiImg],
		data(){
			return{
				feedTag:[{name:'社情反映'},{name:'舆论引导'},{name:'其他'}],
				tagIndex:-1,
				isSelTagFlag:false,
				feedTagTxt:'请选择反馈标签',
				feedTit:'',
				feedCon:'',
				lxrName:'',
				lxrTel:'',
				pathName: 'sqSys/sqFeedBack',//社区意见反馈
			}
		},
		methods:{
			bindFeedBackTag(e){
				this.tagIndex = e.detail.value;
				this.isSelTagFlag = true;
				this.feedTagTxt = this.feedTag[this.tagIndex].name;
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("/static/css/common/uni.css");
	@import '@/static/scss/addYybs.scss';
	.lxrForm{
		margin: 30rpx 0 30rpx;
		.lxrItem{
			flex: 1;
			.lxrTit{
				font-size: 26rpx;
				color: $sq-maina;
			}
			.inpView{
				height: 80rpx;
				line-height: 80rpx;
				font-size: 28rpx;
				border-bottom: 1rpx solid #E1E3E8;
				color: $sq-main0;
			}
			&:first-child{
				margin-right: 15rpx;
			}
		}
	}
</style>